<template>
  <div class="footer">
    <div class="container">
      <el-row :gutter="10" class="footer1">
        <el-col :span="9" class="contact">
          <div class="contactInfo">
            <h3>联系我们</h3>
            <p>电话：{{ companyInfo.contactPhone || "无" }}</p>
            <p>邮箱：{{ companyInfo.contactEmail || "无" }}</p>
            <p>地址：{{ companyInfo.address || "无" }}</p>
          </div>
          <div class="scanImg">
            <img :src="baseURL + companyInfo.qrCode" />
            <div class="scan">扫描二维码关注</div>
          </div>
        </el-col>
        <el-col :span="15" class="main-menus">
          <div class="menu">
            <main-menu bg-color="#222429" text-color="#D9D9D9" active-color="#D9D9D9" />
          </div>
          <div class="links">
            <p>友情链接</p>
            <p>
              <a href="https://www.baidu.com" target="_blank">百度</a>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer2">
      <el-row>
        <el-col :span="24">
          Copyright © zjypt.com, All Rights Reserved. — 中酒云网版权所有
          技术支持：中酒云网
        </el-col>
        <el-col :span="24">
          <a href="https://beian.miit.gov.cn/" target="_blank"> 蜀ICP备2023016001号-1</a>
          <!-- <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002003679"
            target="_blank"
            >川公网安备 51019002003679号</a
          > -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import MainMenu from "@/views/client/c-cpns/main-menu.vue";
import { contractCompany } from "@/api/control/order";

const baseURL = import.meta.env.VITE_BASE_URL;
const companyInfo = ref<any>({}); // 公司信息

onMounted(() => {
  getCompanyInfo();
});

// 获取公司信息
const getCompanyInfo = () => {
  contractCompany('COMPANY_INFORMATION').then((res: any) => {
    companyInfo.value = res.data;
  });
};
</script>
<style lang="less" scoped>
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  border-bottom: none !important;
}
.footer {
  background: #222429;
  .container {
    .footer1 {
      padding: 50px 0;
      .contact {
        display: flex;
        justify-content: space-between;
        padding-right: 20px !important;
        .contactInfo {
          flex: 1;
          margin-right: 10px;
          color: #d9d9d9;
          h3 {
            color: #fff;
          }
          p {
            margin-top: 24px;
          }
        }
        .scanImg {
          width: 130px;
          text-align: center;
          color: #d9d9d9;
          img {
            height: 130px;
            width: 130px;
          }
          .scan {
            font-size: 13px;
            margin-top: 6px;
            text-align: center;
          }
        }
      }
      .main-menus {
        border-left: 1px solid rgba(217, 217, 217, 0.5);
        .links {
          a {
            color: #6b707f;
          }
          color: #d9d9d9;
          margin-top: 40px;
          margin-left: 20px;
          p {
            margin-top: 20px;
          }
        }
      }
    }
  }
  .footer2 {
    a {
      color: #6b707f;
    }
    color: #6b707f;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid;
  }
}
</style>
